<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>列表组件</title>
	<!--引入Vue库-->
	<script src="vue.js"></script>
</head>
<body>	
<div id="app">
  <parent></parent>
</div>
<script>
  var childNode = {
      template: `
      <ul>
        <slot name="item" v-for="item in items" :text="item.text">默认值</slot>
      </ul>
      `,
      data(){
        return{
          items:[
            {id:1,text:'第1段内容'},
            {id:2,text:'第2段内容'},
            {id:3,text:'第3段内容'},
          ]
        }
      }
  };
  var parentNode = {
      template: `
      <div class="parent">
        <p>父组件</p>
        <child>
          <template slot="item" scope="props">
              <li>{{ props.text }}</li>
          </template>
        </child>
      </div>
      `,
      components: {
        'child': childNode
      },
  };
  // 创建根实例
  var vm=new Vue({
      el: '#app',
      components: {
        'parent': parentNode
      }
  })
</script>
</body>
</html>
